<template>
  <div id="map"></div>
</template>

<script>
  import MYCONF from '../../myConf'
  import {mapState, mapMutations, mapGetters} from 'vuex'

  export default {
    name: "map",
    mounted() {
      this.mapInit();
    },
    methods: {
      mapInit() {
        minemap.accessToken = MYCONF.map.token;
        minemap.solution = MYCONF.map.solu;
        this.map = new minemap.Map({
          container: 'map',
          style: MYCONF.map.style,
          center: [116.40717, 39.90469],
          zoom: 9,
          pitch: 0,
          maxZoom: 17, //地图最大缩放级别限制
          minZoom: 3
        });
        const map = this.map;
        // map.on('moveend',function () {
        //   // console.log(map.getCenter());
        // })
        map.on('click',(e)=>{
          let fe = map.queryRenderedFeatures(e.point,{
            layer:['point_layer']
          })
          console.log(fe);
        })
        map.on('load', () => {
          // map.addSource("point", {
          //   type: "geojson",
          //   data: "./static/test.json"
          // });
          map.addSource("point", {
            type: "vector",
            tiles:[MYCONF.service.point]
          });
          map.addLayer({
            id: "point_layer",
            source: "point",
            type: "circle",
            "source-layer":'dot',
            paint:{
              // "circle-radius":10,
              // "circle-color":"#fff"
              'circle-radius': {
                "stops": [[3, 1], [8, 3], [20, 6]], "base": 1.2
              },
              "circle-color":{
                property:'active',
                type: "categorical",
                stops:[
                  ['true','#9ffcf5'],
                  ['false','#eee']
                ]
              },
            }
          })
        })
      }
    },
    computed: {
      ...mapGetters(['pointFilter']),
      ...mapState({
        curPosition:state=>state.myMap.curPosition
      })
    },
    watch: {
      pointFilter(val) {
        // console.log(val);
        // console.log(this.pointFilter);
        this.map.setFilter('point_layer',val)
      },
      curPosition(val){
        // console.log(val)
        this.map.flyTo({
          center:val.center
        })
      }
    }


  }

</script>

<style scoped>
  #map {
    width: 100%;
    height: 100%;
  }
</style>
